<template>
  <div>
    <!-- 登录界面 -->
    <video autoplay="autoplay" muted="muted" loop="loop">
      <source
        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c0a73c85-726e-4071-ab36-1a3be45f6150/2e52bb99-847c-4b91-bf92-01df0a59ab0c.mp4"
        type="video/mp4"
      />
    </video>
    <div>
      <!-- 表单 -->
      <el-form :model="loginForm" ref="loginFormRef" :rules="loginRules">
        <el-tabs v-model="activeName" :stretch="true" class="login">
          <!-- 登录 -->
          <el-tab-pane label="登录" name="first" class="tabs1">
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                placeholder="账号"
                prefix-icon="el-icon-s-custom
						"
                class="input1"
              >
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" class="btn1" @click="login"
                >登录</el-button
              >
            </el-form-item>
          </el-tab-pane>

          <!-- 注册 -->
          <el-tab-pane label="注册" name="second" class="tabs2">
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="registeredForm.username"
                placeholder="账号"
                prefix-icon="el-icon-s-custom
						"
                class="input2"
              >
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="registeredForm.password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>

            <!-- 确认密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="registeredForm.checkPassword"
                placeholder="确认密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" class="btn2" @click="registered()"
                >注册</el-button
              >
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
        ],
      },
      registeredForm: {
        username: "",
        password: "",
        checkPassword: "",
      },
      activeName: "first",
    };
  },
  methods: {
    //表单登录之前预验证
    login() {
      // 防止误触
      if (this.loginForm.username != "" && this.loginForm.password != "") {
        this.$axios.post("/api/user/login", this.loginForm).then((res) => {
          if (res.data.msg === "登录成功") {
            // 判断身份，跳转页面
            if (res.data.user.dentity.dentity_num === 1) {
              sessionStorage.setItem("token", this.loginForm.username);
              this.$router.push("/home");
            } else {
              sessionStorage.setItem("token", this.loginForm.username);
              this.$router.push("/admin");
            }
          } else {
            this.open3();
          }
        });
      } else {
        this.open5();
      }
    },
    registered() {
      if (this.registeredForm.password != this.registeredForm.checkPassword) {
        this.open2();
        this.registeredForm = {
          username: "",
          password: "",
          checkPassword: "",
        };
        return;
      }
      if (
        this.registeredForm.username != "" &&
        this.registeredForm.password != ""
      ) {
        this.$axios
          .post("/api/user/registered", this.registeredForm)
          .then((res) => {
            if (res.data.code === 1) {
              this.open1();
              this.$router.push("/");
            } else {
              this.open4();
            }
          });
      } else {
        this.open5();
      }
    },
    open1() {
      this.$notify({
        title: "成功",
        message: "恭喜你注册成功！",
        type: "success",
      });
    },

    open2() {
      this.$notify({
        title: "警告",
        message: "前后密码不一致！",
        type: "warning",
      });
    },

    open3() {
      this.$notify.error({
        title: "错误",
        message: "账号或密码错误！",
      });
    },

    open4() {
      this.$notify.error({
        title: "错误",
        message: "该用户已存在！",
      });
    },
    open5() {
      this.$notify({
        title: "警告",
        message: "请输入账号或密码！",
        type: "warning",
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

video {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -9999;
  object-fit: fill;
}

.login {
  background-color: rgb(228, 245, 255);
  width: 50%;
  height: 400px;
  margin: auto;
  border-radius: 30px;
  margin-top: 200px;
}

.login {
  text-align: center;
  padding-top: 30px;
  padding-right: 200px;
  padding-left: 200px;
}

.btn1 {
  margin-top: 40px;
  width: 200px;
  height: 50px;
}
.el-tabs__item {
  font-size: 26px;
  color: #313131;
  font-family: STKaiti;
}
.input1 {
  margin-top: 30px;
}
.input2 {
  margin-top: 20px;
}
.btn2 {
  margin-top: 10px;
  width: 200px;
  height: 50px;
}
</style>
